<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Tab 1</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content no-padding>
      <div id="output"></div>
      <canvas class="vex-tabdiv"
       data-width="600"
        data-scale="1.0"
        data-editor="false"
        data-player="false"
        data-tab-stave-lines="5">
        options space=20
        tabstave notation=true
        notes :q 5/4 6/4 7/4 | 8/4 9/4 10/4
       ></canvas>

       <canvas id="paper"
       data-width="600"
        data-scale="1.0"
        data-editor="false"
        data-player="false"
        data-tab-stave-lines="5">
        options space=20
        tabstave notation=true
        notes :q 5/4 6/4 7/4 | 8/4 9/4 10/4
       ></canvas>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import { toRefs, reactive, onMounted, ref } from 'vue';
import abcjs from "abcjs";
import 'abcjs/abcjs-audio.css';
// import * as VexTab from 'vextab/dist/main.dev.js';
import Vex from 'vexflow';
//  import vextab from 'vextab/src/main.js';
declare const vextab: any;
// import * as vextab from 'vextab';
//  'vextab'
export default {
  components: {
    IonPage, IonHeader, IonToolbar, IonTitle, IonContent
  },
  setup(props: any) {
    console.log(vextab,'======VexTab=====');
    const width = window.innerWidth - 3;
    // const { VexTab, Artist, Vex } = vextab; 
    //   const Vex = new VexFlow();
      // const { Renderer, Stave, StaveNote, Voice, Formatter } = VexFlow.Flow;
      onMounted(() => {
//         const Renderer = Vex.Flow.Renderer;
//         const renderer = new Renderer(document.querySelectorAll('.vex-tabdiv')[0], Renderer.Backends.CANVAS);
//         const artist = new Artist(10, 10, window.innerWidth, { scale: 1});
//         console.log(artist,'==================');
//         const tab = new VexTab(artist);
//         //   C-D-E-F-G-A-B/4| :w 5/4 | :h 5/4 | :4 5/4| :8 5/4 :8 5/4| :16 5/4 :16 5/4| :32 5/4 :32 5/4
//         try {
//     tab.parse(` tabstave notation=true tablature=false time=1/16
//     notes (C/4.G/4.D/4) |  :8 5s7s8/5 ^3^ | :8d 5/4 :16 5/5 | :wd ## | :hd ## | :4d ##  | :8d ## |:16d ## | :32d ## | C-D-E-F-G-A-B/4 :w 5/4 :2 5/4 :4 5/4 :8 5/4 :16 5/4:32 5/4|`); //  :h ## | :4 ## | :8 ## |:16 ## |:32 ## |
//     artist.render(renderer);
// } catch (e) {
//     console.error(e);
// }

        // try {
        //     tab.parse('tabstave').val());
        //     artist.render(renderer);
        // } catch (e) {
        //     console.error(e);
        // }
        // const VexTab = Vex.Flow.VexTab;
    // const div = document.querySelector('.vex-tabdiv');
    // new VexTab(div).init();
        
//     | C> D- E | F-G- A |: [a1e1f1] (3[ABCD][ABCD][ABCD][ABCD] D6 D7|"fff"C "sf"D "fz"E|"Em"EB{c}BA B7 EB  (3B/B/B/B/|~B2 AB "多个音符相连单个附点"d>"多个音符相连多个附点"B>>AG|"D"FDAD B<DA<<D|FDAD dAFD|
// "Em1"EBBA B2 EB|B2 B6 B7 AB defg|af"升"^e"重升"^^c "还原"=B"降"_A"重降"__F|"Em"DEFD E2:|
// |:gf|"Em"eB B2 efge|eB B2 gedB|"D"A2 FA DAFA|A2 FA defg|
//  "Em"eB "相邻音符连线"B2-C4 eBgB|eB "多个音符连线"(B2 defg)|"D"afe^c dBAF|"Em"DEFD "减8va"E2,,"加8va"B2'' E/8 a/4 A/2 A A2 A4 z/8 z/4 z/2 z z2 z4 ~A ~c .A .c vA vc uA uc Hc Lc Jc Mc Oc Pc Rc Sc Tc tc !c +c+ =sc A/8>>|
        const el = document.getElementById('output');
        abcjs.renderAbc("output", `X: 1
M: 1/4
L:1/4
K: Bbm
     | C> D- E | F-G- A |: [a1e1f1] (3[ABCD][ABCD][ABCD][ABCD] D6 D7|DEFD "减8va"E2,,"加8va"B2'' A/8 A/4 A/2 A A2 A4 z/8 z/4 z/2 z z2 z4 |`,{ scrollHorizontal: true, viewportHorizontal: true,  staffwidth: width}); // responsive: "resize"  d23 d24 d25 d26 d27 d28 d29 d30 d31
        // init();
        // init1();
        // init2();
    })

    // function init2(){
    //   const { Factory, EasyScore } = Vex.Flow;
    // const vf = new Factory({ 
    //   renderer: { elementId: 'output', width: 500, height: 100 }
    // });
    
    // const score = vf.EasyScore();
    
    // const system = vf.System();
    // system.addStave({
    //   voices: [
    //     score.voice([
    //       score.notes('C4/q', { stem: 'up' })
    //     ])
    //   ]
    // }).addClef('treble').addTimeSignature('4/4');
    
    // // 添加极强音标记
    // const stave = system.getStaves()[0];
    // const context = vf.getContext();
    // new Vex.Flow.TextDynamics({
    //   text: "fff",
    //   line: 10,
    //   duration: "4"
    // }).setStave(stave).setContext(context).draw();
    
    // vf.draw();
    // }

//     function init1(){
//       const { Renderer, Stave } = Vex.Flow;
//       const VF = Vex.Flow;
//       const div = document.getElementById('paper1');
//       const renderer = new Renderer(div as any, Renderer.Backends.CANVAS);

//       renderer.resize(window.innerWidth, 100);
//       const context = renderer.getContext();
//       context.setFont('Arial', 10);
//       const staves = [
//         new Vex.Flow.Stave(10, 0, window.innerWidth/6 + 50),
//         new Vex.Flow.Stave(window.innerWidth/6 + 60, 0, window.innerWidth/6),
//       ];
//       const notes = [
//         new VF.StaveNote({ keys: ["c/4"], duration: "q" }), new VF.StaveNote({ keys: ["d/4"], duration: "q" }), new VF.StaveNote({ keys: ["e/4"], duration: "q" }), new VF.StaveNote({ keys: ["f/4"], duration: "q" })
//       ]; // C, E, G in the 4th octave, quarter note duration
//       notes[0].addModifier(new VF.Accidental("#"), 0); // forte at the first note (index 0)
//       notes[1].addModifier(new VF.Accidental("##"), 0); // piano at the second note (index 1)
//       notes[2].addModifier(new VF.Accidental("b"), 0); // staccato at the third note (index 2)
//       notes[3].addModifier(new VF.Accidental("bb"), 0); // staccato at the third note (index 2)
//       // 休止符 全休止符："wr" 二分休止符："hr" 四分休止符："qr" 八分休止符："8r" 十六分休止符："16r"  六十四分休止符："64r"
//       const notes1 = [new VF.StaveNote({ keys: ["c/4"], duration: "q" }), new VF.StaveNote({ keys: ["g/4"],stem_direction: undefined, duration: "32r", line: 6 }),new VF.StaveNote({ keys: ["d/4"],stem_direction: undefined, duration: "32r" }),new VF.StaveNote({ keys: ["d/4"],stem_direction: 0, duration: "32r" }), new VF.StaveNote({ keys: ["d/4"],stem_direction: 0, duration: "32r" }), new VF.StaveNote({ keys: ["d/4"], duration: "8r" }), new VF.StaveNote({ keys: ["e/4"], duration: "q" }), new VF.StaveNote({ keys: ["f/4"], duration: "q" })]; // C, E, G in the 4th octave, quarter note duration
//       notes1[0].addModifier(new VF.Accidental("n"), 0); // forte at the first note (index 0)
//       notes1[1].addModifier(new VF.Dot()); // piano at the second note (index 1)
//       // notes1[1].addModifier(new VF.Dot()); // piano at the second note (index 1)
//       notes1[2].addModifier(new VF.Dot()); // piano at the second note (index 1)
//       // notes1[1].addModifier(new VF.Dot(), 0); // staccato at the third note (index 2)单附点
//       notes1[3].addModifier(new VF.Dot()); // staccato at the third note (index 2) 
//       notes1[3].addModifier(new VF.Dot()); // staccato at the third note (index 2) 双附点
//       staves.forEach((stave, index) => {
//         if(index === 0){
//           stave.addClef("bass")
//             .addTimeSignature("4/4")
//             .setContext(context)
//             .draw();
//         } else {
//           stave
//             .setContext(context)
//             .draw();
//         }
//       });
//       const voice = new VF.Voice({ num_beats: 4,  // 每小节4拍
//                                 beat_value: 4,  // 每拍4分音符
//                                 });
//       voice.addTickables(notes);
      
//       const formatter = new VF.Formatter().joinVoices([voice]).format([voice], window.innerWidth/6); // 设置最大宽度为400px
//       // voice.draw(stave, context); // 在stave上绘制音符和动态标记
//       voice.draw(context, staves[0])
//       const voice1 = new VF.Voice({ num_beats: 4,  // 每小节4拍
//                                 beat_value: 4,  // 每拍4分音符
//                                 });
//       voice1.addTickables(notes1);
      
//       const formatter1 = new VF.Formatter().joinVoices([voice1]).format([voice1], window.innerWidth/6); // 设置最大宽度为400px
//       // voice.draw(stave, context); // 在stave上绘制音符和动态标记
//       voice1.draw(context, staves[1])
//       // const voice1 = new VF.Voice({ num_beats: 4,  // 每小节4拍
//       //                           beat_value: 4,  // 每拍4分音符
//       //                           });
//       // voice1.addTickables(notes);
//       notes1[1].setKeyLine(0, 4); // 设置休止符位置

//       const dynamic = new Vex.Flow.TextDynamics({
//         text: "fff",
//         duration: "4",
//         line: 10  // 垂直位置（数值越大位置越低）
//       });
//       // dynamic.setStave(stave[0]).setContext(context);
//     }

    function init(){
      const { Renderer, Stave } = Vex.Flow;
      const VF = Vex.Flow;
      const div = document.getElementById('paper');
      const renderer = new Renderer(div as any, Renderer.Backends.CANVAS);

      renderer.resize(window.innerWidth, 100);
      const context = renderer.getContext();
      context.setFont('Arial', 10);
      const staves = [
        new Vex.Flow.Stave(10, 0, window.innerWidth/6),
        new Vex.Flow.Stave(window.innerWidth/6 + 10, 0, window.innerWidth/6),
        new Vex.Flow.Stave(window.innerWidth/6 + window.innerWidth/6 + 10, 0, window.innerWidth/6),
        new Vex.Flow.Stave(window.innerWidth/6 + (window.innerWidth/6) * 2+ 10, 0, window.innerWidth/6),
        new Vex.Flow.Stave(window.innerWidth/6 + (window.innerWidth/6) * 3 + 10, 0, window.innerWidth/6),
        new Vex.Flow.Stave(window.innerWidth/6 + (window.innerWidth/6) * 4 + 10, 0, window.innerWidth/6),
      ];
      staves.forEach((stave, index) => {
        if(index === 0){
          stave.addClef("treble")
            .addTimeSignature("4/4")
            .setContext(context)
            .draw();
        } else {
          stave
            .setContext(context)
            .draw();
        }
      });

      // // Add a clef and time signature.
      // stave.addClef('treble').addTimeSignature('4/4');

      // // Connect it to the rendering context and draw!
      // stave.setContext(context).draw();
      const notes = [
        new VF.StaveNote({ keys: ["c/4"], duration: "q" }), new VF.StaveNote({ keys: ["d/4"], duration: "q" }), new VF.StaveNote({ keys: ["e/4"], duration: "q" }), new VF.StaveNote({ keys: ["f/4"], duration: "q" })]; // C, E, G in the 4th octave, quarter note duration
//         notes[0].addArticulation(0, new Vex.Flow.Articulation("f").setPosition(4));
// notes[0].addArticulation(0, new Vex.Flow.Articulation("f").setPosition(4));
// notes[0].addArticulation(0, new Vex.Flow.Articulation("f").setPosition(4));
      notes[0].addModifier(new VF.Articulation("a-"), 0); // forte at the first note (index 0)
      notes[1].addModifier(new VF.Articulation("av"), 0); // piano at the second note (index 1)
      notes[2].addModifier(new VF.Articulation("a."), 0); // staccato at the third note (index 2)
      notes[3].addModifier(new VF.Articulation("a>"), 0); // staccato at the third note (index 2)
      const notes1 = [new VF.StaveNote({ keys: ["c/4"], duration: "q" }), new VF.StaveNote({ keys: ["d/4"], duration: "q" }), new VF.StaveNote({ keys: ["e/4"], duration: "q" }), new VF.StaveNote({ keys: ["f/4"], duration: "q" })]; // C, E, G in the 4th octave, quarter note duration
      notes1[0].addModifier(new VF.Articulation("a+"), 0); // forte at the first note (index 0)
      notes1[1].addModifier(new VF.Articulation("ao"), 0); // piano at the second note (index 1)
      notes1[2].addModifier(new VF.Articulation("ah"), 0); // staccato at the third note (index 2)
      notes1[3].addModifier(new VF.Articulation("a@"), 0); // staccato at the third note (index 2)
      const notes2 = [new VF.StaveNote({ keys: ["c/4"], duration: "q" }), new VF.StaveNote({ keys: ["d/4"], duration: "q" }), new VF.StaveNote({ keys: ["e/4"], duration: "q" }), new VF.StaveNote({ keys: ["f/4"], duration: "q" })]; // C, E, G in the 4th octave, quarter note duration
      notes2[0].addModifier(new VF.Articulation("a@a"), 0); // forte at the first note (index 0)
      notes2[1].addModifier(new VF.Articulation("a@u"), 0); // piano at the second note (index 1)
      notes2[2].addModifier(new VF.Articulation("a@s"), 0); // staccato at the third note (index 2)
      notes2[3].addModifier(new VF.Articulation("a@as"), 0); // staccato at the third note (index 2)
      const notes3 = [new VF.StaveNote({ keys: ["c/4"], duration: "q" }), new VF.StaveNote({ keys: ["d/4"], duration: "q" }), new VF.StaveNote({ keys: ["e/4"], duration: "q" }), new VF.StaveNote({ keys: ["f/4"], duration: "q" })]; // C, E, G in the 4th octave, quarter note duration
      notes3[0].addModifier(new VF.Articulation("a@us"), 0); // forte at the first note (index 0)
      notes3[1].addModifier(new VF.Articulation("a@l"), 0); // piano at the second note (index 1)
      notes3[2].addModifier(new VF.Articulation("a@al"), 0); // staccato at the third note (index 2)
      notes3[3].addModifier(new VF.Articulation("a@ul"), 0); // staccato at the third note (index 2)
      const notes4 = [new VF.StaveNote({ keys: ["c/4"], duration: "q" }), new VF.StaveNote({ keys: ["d/4"], duration: "q" }), new VF.StaveNote({ keys: ["e/4"], duration: "q" }), new VF.StaveNote({ keys: ["f/4"], duration: "q" })]; // C, E, G in the 4th octave, quarter note duration
      notes4[0].addModifier(new VF.Articulation("a@vl"), 0); // forte at the first note (index 0)
      notes4[1].addModifier(new VF.Articulation("a@avl"), 0); // piano at the second note (index 1)
      notes4[2].addModifier(new VF.Articulation("a@uvl"), 0); // staccato at the third note (index 2)
      notes4[3].addModifier(new VF.Articulation("a|"), 0); // staccato at the third note (index 2)
      const notes5 = [new VF.StaveNote({ keys: ["c/4"], duration: "q" }), new VF.StaveNote({ keys: ["d/4"], duration: "q" }), new VF.StaveNote({ keys: ["e/4"], duration: "q" }), new VF.StaveNote({ keys: ["f/4"], duration: "q" })]; // C, E, G in the 4th octave, quarter note duration
      notes5[0].addModifier(new VF.Articulation("am"), 0); // forte at the first note (index 0)
      notes5[1].addModifier(new VF.Articulation("a,"), 0); // piano at the second note (index 1)
      notes5[2].addModifier(new VF.Articulation("a@uvl"), 0); // staccato at the third note (index 2)
      notes5[3].addModifier(new VF.Articulation("a|"), 0); // staccato at the third note (index 2)
      
      const voice = new VF.Voice({ num_beats: 4,  // 每小节4拍
                                beat_value: 4,  // 每拍4分音符
                                });
      voice.addTickables(notes);
      
      const formatter = new VF.Formatter().joinVoices([voice]).format([voice], window.innerWidth/6); // 设置最大宽度为400px
      // voice.draw(stave, context); // 在stave上绘制音符和动态标记
      voice.draw(context, staves[0])
      const voice1 = new VF.Voice({ num_beats: 4,  // 每小节4拍
                                beat_value: 4,  // 每拍4分音符
                                });
      voice1.addTickables(notes1);
      
      const formatter1 = new VF.Formatter().joinVoices([voice1]).format([voice1], window.innerWidth/6); // 设置最大宽度为400px
      // voice.draw(stave, context); // 在stave上绘制音符和动态标记
      voice1.draw(context, staves[1])
      const voice2 = new VF.Voice({ num_beats: 4,  // 每小节4拍
                                beat_value: 4,  // 每拍4分音符
                                });
      voice2.addTickables(notes2);
      
      const formatter2 = new VF.Formatter().joinVoices([voice2]).format([voice2], window.innerWidth/6); // 设置最大宽度为400px
      // voice.draw(stave, context); // 在stave上绘制音符和动态标记
      voice2.draw(context, staves[2])
      const voice3 = new VF.Voice({ num_beats: 4,  // 每小节4拍
                                beat_value: 4,  // 每拍4分音符
                                });
      voice3.addTickables(notes3);
      
      const formatter3 = new VF.Formatter().joinVoices([voice3]).format([voice3], window.innerWidth/6); // 设置最大宽度为400px
      // voice.draw(stave, context); // 在stave上绘制音符和动态标记
      voice2.draw(context, staves[3])
      const voice4 = new VF.Voice({ num_beats: 4,  // 每小节4拍
                                beat_value: 4,  // 每拍4分音符
                                });
      voice4.addTickables(notes4);
      
      const formatter4 = new VF.Formatter().joinVoices([voice4]).format([voice4], window.innerWidth/6); // 设置最大宽度为400px
      // voice.draw(stave, context); // 在stave上绘制音符和动态标记
      voice2.draw(context, staves[4])
      const voice5 = new VF.Voice({ num_beats: 4,  // 每小节4拍
                                beat_value: 4,  // 每拍4分音符
                                });
      voice5.addTickables(notes5);
      
      const formatter5 = new VF.Formatter().joinVoices([voice5]).format([voice5], window.innerWidth/6); // 设置最大宽度为400px
      // voice.draw(stave, context); // 在stave上绘制音符和动态标记
      voice2.draw(context, staves[5])
    }  
  }
}
</script>
<style lang="scss" scoped>
ion-content{
    --background: #f4f4f4;
    --padding-top: 10px;
    --padding-end: 0px;
    --padding-start: 0px;
  }
</style>